<template>
  <view class="profile">
    <button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
      <image class="avatar" :src="userProfile.avatarUrl"></image>
    </button>
    <view class="nickname-wrapper">
      <label for="">昵称:</label>
      <input type="nickname" :value="userProfile.nickName" @blur="onBlurNickName" placeholder="请输入昵称" />
    </view>
    <button @click="saveProfile">确认</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      userProfile: {
        avatarUrl: '',
        nickName: ''
      }
    };
  },
  methods: {
    onChooseAvatar(ev) {
      // 获取头像地址
      this.userProfile.avatarUrl = ev.detail.avatarUrl;
    },
    onBlurNickName(ev) {
      this.userProfile.nickName = ev.detail.value;
    },
    saveProfile() {
      // 调用 mutations 将用户信息保存起来
      this.$store.commit('m_user/saveProfile', this.userProfile);
    }
  }
};
</script>

<style lang="scss" scoped>
.profile {
  padding: 0 40rpx;
}

.avatar-wrapper {
  padding: 0;
  width: 112rpx;
  border-radius: 16rpx;
  margin-top: 80rpx;
  margin-bottom: 120rpx;

  &::after {
    content: '';
    border: none;
  }

  .avatar {
    display: block;
    width: 112rpx;
    height: 112rpx;
  }
}

.nickname-wrapper {
  display: flex;
  align-items: center;
  height: 80rpx;
  border-bottom: 1rpx solid #eee;
  margin-bottom: 40rpx;

  label {
    width: 100rpx;
    color: #333;
    font-size: 34rpx;
  }

  input {
    color: #666;
    font-size: 34rpx;
  }
}
</style>
